{% extends "page/base.html" %}
{% load static %}

{% block body %}
<link rel="stylesheet" href="/static/template/landscap1/style.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<header id="header">
    <div class="studio_logo">
        <h1>
            <a href="#">
	            <img src="{{logo}}" alt="{{name}}">
                <!--Studio Logo-->
            </a>
        </h1>
    </div>
    <nav>
        <ul class="nav nav-pills">
            <li role="presentation">
                <a href="{% url 'studio' name 'home' %}">Home</a>
            </li>
            <li role="presentation">
                <a href="{% url 'studio' name 'collection' %}">Collection</a>
            </li>
            <li role="presentation">
                <a href="{% url 'studio' name 'contact' %}">Contact</a>
            </li>
        </ul>
    </nav>
</header>
{% block banner %}
<div class="banner-thumbnail-wrapper">
    <a href id="before">
        <!--<img src="image/icon-before.png" alt=""/>-->
    </a>
    <ul>
	    {% for app in fea_app %}
        <li>
            <a href="/page/{{name}}/{{app.name}}">
	            <img src="{{app.fea_graph}}"/> 
                <!--<img src="image/Feature-Graphic1.jpg"/>-->
            </a>
        </li>
        {% endfor %}
    </ul>
    <a href id="next">
        <!--<img src="image/icon-next.png"/>-->
    </a>
</div>
{% endblock %}

{% block main %}
<style type="text/css" media="screen" id="test">
	.landscape,.portait{
		border-bottom: 1px solid #999;
		padding-bottom: 50px;
		margin-bottom:50px;
	}
</style>
<script type="text/javascript">
	$(function () {
		if($('.landscape li').length==0){
			$('.landscape').hide()
		}
		if($('.portait li').length==0){
			$('.portait').hide()
		}
	})
	
</script>
<main id="page">
    <div class="content">
        <div class="studio_intro">
	        {% if slogan %}
	        <h1>{{slogan}}</h1>
	        {% else %}
            <h1>We are {{name}}</h1>
            {% endif %}
            <p>
            	{{dsp}}
                
            </p>
            <div class="store_icon">
                <a href="{{link_gp}}">
                    <img src="/static/image/gp.png"/>
                </a>
                <a href="{{link_ios}}">
                    <img src="/static/image/apple_store.png" class="fbImg"/>
                    <!--<object data="/static/image/apple_store.svg" type="image/svg+xml"></object>-->
                </a>
            </div>
        </div>
        <div class="cutting_line"></div>
        <div class="feature_games">
            <h3>Feature Games</h3>
            <div class="screenShots">
	            <ul class='landscape'>
		        {% for app in fea_app %}
		            {% if app.orientation == "landscape" %}
			            <li>
	                        <a href="/page/{{name}}/{{app.name}}">
	                        <img src="{{app.screenshots.0}}">
	                        </a>
	                    </li>
                    
		              {% endif %}
                {% endfor %}
	            </ul>
                <ul class='portait'>
                {% for app in fea_app %}
                	{% if app.orientation == "portait" %}
                    <li>
                        <a href="/page/{{name}}/{{app.name}}">
                        <img src="{{app.screenshots.0}}">
                        </a>
                    </li>
                    {% endif %}
                {% endfor %}

                </ul>
            </div>
            <div class="view_all">
                <a href="/page/{{name}}/collection" class="view_btn">View All Games</a>
            </div>
        </div>
    </div>
</main>
{% endblock %}
<div id="perFooter">
    <div class="pre-footer-inner">

		{% if link_gp %}
        <a href="{{link_gp}}">
            <img src="{% static 'image/mask.png' %}"/>
        </a>
        {% endif %}

        {% if link_ios %}
        <a href="{{link_ios}}">
            <img src="{%static 'image/apple.png' %}"/>
        </a>
        {% endif %}
        
	    {% if link_face %}
        <a href="{{link_face}}">
            <img src="{% static 'image/face.png'%}"/>
        </a>
		{% endif %}
        {% if link_twit %}
        <a href="{{link_twit}}">
            <img src="{%static 'image/tiwter.png' %}"/>
        </a>
        {% endif %}
        
    </div>
</div>
<footer id="footer">
    {% if policy %}
    <div class="privacy">
        <a href="/page/{{name}}/policy/">
            <span>Privacy Policy</span>
        </a>
    </div>
    {% endif %}
    <div class="copyright">
	    <p>{{copyright}}</p>
        <!--<p>Copyright @Bravo Kids Media. All Rights Reserved.</p>-->
    </div>
</footer>

    {% block js %}
    <script>
        var index=0;
        //获取包裹轮播图片的li长度
        var len=$(".banner-thumbnail-wrapper li").length;
        function startplay(){
            //设置时钟器
            setInterval(function(){
                //从0开始循环递增
                index++;
                //从第一个li开始淡入淡出，同辈的其他li隐藏
                $(".banner-thumbnail-wrapper li").eq(index%len).fadeIn(800).siblings().hide();
            },2000)
        }
        startplay();
    //

    </script>
    {% endblock %}

{% endblock %}